<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>商品详情</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/productdetail.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/item.css">
</head>

<body>
<%@ include file="head.jsp" %>
<div class="nav_bar">
    <div class="wrap">
        <a href="index.html">首页</a>
        &gt; <a href="#">Dota2神秘商店</a>
        &gt; <a href="#">DOTA2神秘商店</a>
        &gt; <a href="#">创意T恤</a>
        &gt; <a href="#">${product.pname}</a>
    </div>
</div>
<!-- 商品细节 -->
<input id="isSkuProduct" type="hidden" value="true">
<input id="productId" type="hidden" value="360">
<input id="skuId" type="hidden" value="1027">
<div class="goods_detail">
    <div class="wrap cf">
        <div class="gallery f_left">
            <div class="picFocus">
                <div class="bd">
                    <div class="tempWrap" style="overflow:hidden; position:relative; width:430px">
                        <ul style="width: 430px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: 0px;">
                            <li style="float: left; width: 430px;"><img src="${pageContext.request.contextPath}/showPic?pid=${product.pid}" width="430"
                                                                        height="430"></li>
                        </ul>
                    </div>
                </div>
                <div class="hd">
                    <ul>
                        <li class="on"><img src="${pageContext.request.contextPath}/showPic?pid=${product.pid}" width="100" height="100"
                                            alt="DOTA2-TI7  水晶喵女与狸娜 T恤" title="DOTA2-TI7  水晶喵女与狸娜 T恤"></li>
                    </ul>
                </div>
            </div>
            <div class="share">
                <dl class="cf">
                    <dt class="f_left"><a href="javascript:void(0)" data-pid="360"
                                          class="like "><span></span>关注<font>3</font></a></dt>
                </dl>
            </div>
        </div>
        <div class="property f_left">
            <div class="title">
                <h1>${product.pname }</h1>
                <p>${product.ppoint }</p>
            </div>
            <p id="productShowPrice" class="price">¥ ${product.price }</p>
            <table>
                <tbody>
                <tr>
                    <th>运费：</th>
                    <td>
                        <div class="meta">
                            <span class="from">北京</span>至<span class="to shippingTo" title="北京">北京<i></i></span><font>快递：<span
                                class="shippingFee">￥15.00</span></font>
                            <div class="popup shippingPopup">
                                <p class="close"><span></span></p>
                                <div class="nav">
                                    <ul class="cf">
                                        <li class="province">北京<span></span></li>
                                        <li class="city curr" style="">请选择<span></span></li>
                                        <li class="regions" style="display: none;"></li>
                                    </ul>
                                </div>
                                <div class="pane">
                                    <dl class="cf" style="display: none;">
                                        <dd data-area-id="110000">北京</dd>
                                        <dd data-area-id="120000">天津</dd>
                                        <dd data-area-id="130000">河北</dd>
                                        <dd data-area-id="140000">山西</dd>
                                        <dd data-area-id="150000">内蒙</dd>
                                        <dd data-area-id="210000">辽宁</dd>
                                        <dd data-area-id="220000">吉林</dd>
                                        <dd data-area-id="230000">黑龙江</dd>
                                        <dd data-area-id="310000">上海</dd>
                                        <dd data-area-id="320000">江苏</dd>
                                        <dd data-area-id="330000">浙江</dd>
                                        <dd data-area-id="340000">安徽</dd>
                                        <dd data-area-id="350000">福建</dd>
                                        <dd data-area-id="360000">江西</dd>
                                        <dd data-area-id="370000">山东</dd>
                                        <dd data-area-id="410000">河南</dd>
                                        <dd data-area-id="420000">湖北</dd>
                                        <dd data-area-id="430000">湖南</dd>
                                        <dd data-area-id="440000">广东</dd>
                                        <dd data-area-id="450000">广西</dd>
                                        <dd data-area-id="460000">海南</dd>
                                        <dd data-area-id="500000">重庆</dd>
                                        <dd data-area-id="510000">四川</dd>
                                        <dd data-area-id="520000">贵州</dd>
                                        <dd data-area-id="530000">云南</dd>
                                        <dd data-area-id="540000">西藏</dd>
                                        <dd data-area-id="610000">陕西</dd>
                                        <dd data-area-id="620000">甘肃</dd>
                                        <dd data-area-id="630000">青海</dd>
                                        <dd data-area-id="640000">宁夏</dd>
                                        <dd data-area-id="650000">新疆</dd>
                                        <dd data-area-id="710000">台湾</dd>
                                        <dd data-area-id="810000">香港</dd>
                                        <dd data-area-id="820000">澳门</dd>
                                        <dd data-area-id="990000">海外</dd>
                                    </dl>
                                    <dl class="cf" style="">
                                        <dd data-area-id="110100" title="北京市">北京市</dd>
                                    </dl>
                                    <dl class="cf" style="display: none;"></dl>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table style="margin-left: -4px;" id="product_sku_table">

                            <tbody>
                            <tr>
                                <th>${attribute.aname}</th>
                                <td>
                                    <c:forEach items="${listProductNum}" var="attributeList">
                                        <c:if test="${attributeList.storeNum==0}">
                                            <a data-value="66:295" href="javascript:void(0)"
                                               class="option sku-item null">${attributeList.vname}</a>
                                        </c:if>
                                        <c:if test="${attributeList.storeNum>0}">
                                            <a href="javascript:void(0);" data-value="66:297" class="option sku-item"
                                               id="showStock"
                                               onclick="test(${attributeList.vid})">${attributeList.vname}</a>
                                        </c:if>.
                                    </c:forEach>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <th>数量：</th>
                    <td>
                        <span class="amount number-input"><span class="reduce disable"></span><input id="buyNumber"
                                                                                                     type="text"
                                                                                                     value="1" min="1"
                                                                                                     stock="32"
                                                                                                     maxlength="3"
                                                                                                     autocomplete="off"><span
                                class="plus"></span></span>
                        <span class="stock stock_info">（库存<font id="stock_num" data-value="2">22</font>件）</span>
                        <span class="sold">已售出<font id="sold_num">43</font>件</span>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="btns">
                <a href="javascript:void(0)" class="buy btn_buy" onclick="window.open('${pageContext.request.contextPath}/shoppingCartView')">立即购买</a>
                <a href="javascript:void(0)" class="add btn_addCart"><span></span>加入购物车</a>
            </div>
        </div>
    </div>
</div>
<!-- 套餐 -->
<!-- 介绍 -->
<div class="presentation">
    <div class="wrap cf">
        <!-- 猜你喜欢 -->
        <div class="guess_like f_left">
            <dl>
                <dt>猜你喜欢</dt>
                <dd>
                    <a href="#" target="_blank"><img src="${pageContext.request.contextPath}/showPic?pid=${product.pid}" alt="DOTA2- T恤 烫金拍拍" title="DOTA2- T恤 烫金拍拍"></a>
                    <p class="name ellipsis" title="DOTA2- T恤 烫金拍拍"
                       style="word-wrap: break-word; word-break: break-all;">DOTA2- T恤 烫金拍拍</p>
                    <p class="price">¥139.00</p>
                </dd>
            </dl>
        </div>
        <!-- 详情 -->
        <div class="product_detail details f_left">
            <ul class="cf details_nav desc_tab">
                <li class="curr"><a href="javascript:void(0)">商品介绍</a></li>
                <li><a href="javascript:void(0)">产品评论<span>(0)</span></a></li>
            </ul>
            <div class="desc_pane cf">
                <div class="content cf"><p>${product.information }</p></div>
                <div class="content cf" style="display: none;">
                    <div class="comment">
                        <div class="cf rate_header">
                            <div class="f_left rate_score">
                                <p class="num">
                                    0%
                                </p>
                                <p class="stars stars2"></p>
                                <span>好评度</span>
                            </div>
                            <div class="f_left rate_bar">
                                <table cellspacing="0" cellpadding="0">
                                    <tbody>
                                    <tr>
                                        <th>好评(0%)</th>
                                        <td><p><span style="width:0%"></span></p></td>
                                    </tr>
                                    <tr>
                                        <th>中评(0%)</th>
                                        <td><p><span style="width:0%"></span></p></td>
                                    </tr>
                                    <tr>
                                        <th>差评(0%)</th>
                                        <td><p><span style="width:0%"></span></p></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <dl class="cf f_right">
                                <dt class="f_left">买家印象：</dt>
                                <dd class="f_left">
                                    <a href="javascript:void(0)">TI7周边(0)</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="rate_toolbar">
                            <a data-type="0" href="javascript:void(0)" class="curr">全部评价（<span>0</span>）</a>
                            <a data-type="4" href="javascript:void(0)">晒图（<span>0</span>）</a>
                            <a data-type="1" href="javascript:void(0)">好评（<span>0</span>）</a>
                            <a data-type="3" href="javascript:void(0)">中评（<span>0</span>）</a>
                            <a data-type="2" href="javascript:void(0)">差评（<span>0</span>）</a>
                        </div>
                        <div class="comment_list">
                            <div class="page" data-page-count="0" data-page-num="0" data-page-size="10"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@ include file="footer.jsp" %>
</body>
<script type="text/javascript">

    // 遍历循环型号拿到库存
    function test(id) {
        var pid = "${product.pid}";
        pid = $.trim(pid);
        var data = {pid: pid, vid: id};
        $.ajax({
            data: data,
            url: "${pageContext.request.contextPath}/getStoreNum",
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                console.log(data);
                $("#stock_num").empty().html(data);
            },
            error: function () {
                alert("错误");
            }
        });
    }


    $(function () {
        $('a[name="pattr"]').click(function () {
            $(this).addClass('curr').siblings().removeClass('curr');
            var data = {
                vid: $(this).attr('data-vid'),
                pid: $(this).attr('data-pid')
            }
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath }/getProductKUID",
                data: data,
                success: function (obj) {
                    $('#stock_num').html(obj.storenum);
                    $('#stock_num').attr('data-value', obj.kuid);
                }
            });
        });
    });

    //添加到购物车
    $(function () {
        $('a[class="add btn_addCart"]').click(function () {
            //pid num kuid
            var store = $('#stock_num').html();
            if (store == '') {
                alert('请选择型号');
                return;
            }
            var kuid = $('#stock_num').attr('data-value');
            var num = $('#buyNumber').val();

            var data = {
                pid:${product.pid},
                num: num,
                kuid: kuid
            }
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath }/addCart",
                data: data,
                success: function (data) {
                    alert(data.msg);
                }
            });
        });
    });
</script>
</html>
